<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
        <div class="m-t-xs m-t-sm">
          <span>用户信息</span>
          <i class="fa fa-angle-right"></i>
          <span>基本信息</span>
          <i class="fa fa-angle-right" *ngIf="modify"></i>
          <span *ngIf="modify">修改用户信息</span>
        </div>
      </div>
    </div>
  </div>


  <div class="wrapper-sm">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body" >
        <div class="row">
          <div class="col-md-8">
            <table  class="table m-b-none default footable " style="font-size: 14px;">
              <tr>
                <td width="10%"><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px" ></i></td>
                <td width="10%">{{'userinfo.content.USENAME'|translate}}</td>
                <td>{{data?.username}}</td>
              </tr>
              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.ROLES'|translate}}</td>
                <td><span *ngFor="let item of data?.roles; index as i">角色{{i + 1}}：{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
              </tr>
              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.COMPANY'|translate}}</td>
                <td>{{data?.company_name}}</td>
              </tr>
              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.NAME'|translate}}</td>
                <td *ngIf="!modify">{{data?.nick_name}}</td>
                <td *ngIf="modify"><input type="text" [(ngModel)]="modifyData.nick_name" class="form-control"/></td>
              </tr>
              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.EMAIL'|translate}}</td>
                <td *ngIf="!modify">{{data?.email}}</td>
                <td *ngIf="modify"><input type="email"  [(ngModel)]="modifyData.email" class="form-control"/></td>
              </tr>
              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.PHONE'|translate}}</td>
                <td *ngIf="!modify">{{data?.mobile}}</td>
                <td *ngIf="modify"><input type="mobile"  [(ngModel)]="modifyData.mobile" class="form-control"/></td>
              </tr>

              <tr>
                <td><i class="fa fa-check-circle-o" style="color:#23b7e5;font-size:20px"></i></td>
                <td>{{'userinfo.content.DES'|translate}}</td>
                <td *ngIf="!modify">{{data?.remark}}</td>
                <td *ngIf="modify"><textarea rows="1" [(ngModel)]="modifyData.remark" class="form-control"></textarea></td>
              </tr>
            </table>
          </div>
          <div class="col-md-3 col-md-offset-1 m-t-xxl">
            <img class="m-t-xl" *ngIf="!modify && (data?.facing_img!=''||data?.facing_img!=null)" src="http://121.196.221.74:8080/fileupload/mfile?file_name={{data?.facing_img}}" style="height:128px;width:128px">
            <img class="m-t-xl" *ngIf="modify && modifyData.facing_img" src="http://101.37.24.73:8080/fileupload/mfile?file_name={{modifyData.facing_img}}" id="head_img" style="height:128px;width:128px">
            <div class="m-t-md"[style.visibility]="modify?'':'hidden '">
              <input type="text" class="form-control" id="file_upload" name="file_upload" type="file" multiple="true" >
              <span id="file_uploaded"></span>
            </div>
          </div>


        </div>

        <div>
          <div style="text-align:center" *ngIf="!modify">
            <a class="btn btn-sm btn-default btn-rounded" (click)="init()">{{'userinfo.content.EDITBUTTON'|translate}}</a>
          </div>

          <div style="text-align:center"  *ngIf="modify">
            <a class="btn btn-sm btn-default btn-rounded" (click)="save();">保存</a>
            <a class="btn btn-sm btn-default btn-rounded" (click)="init();">重置</a>
            <a class="btn btn-sm btn-default btn-rounded" (click)="clean();">清空</a>
            <a class="btn btn-sm btn-default btn-rounded" (click)="modify=false;">返回</a>
          </div>

        </div>

      </div>

    </div>
  </div>
</div>
